<template>
  <div class="picker-multi-field">
    <van-cell
      :class="['picker-cell', !value && 'input-placeholder']"
      :title="label"
      :value="formatValue"
      clearable
      is-link
      @click="show = true"
    />
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '70vh' }"
      @closed="onCancel"
      @open="onOpen"
    >
      <div class="popup-title">请选择{{ label }}</div>
      <van-checkbox-group v-model="pickerValue">
        <van-cell-group>
          <van-cell
            v-for="item in options"
            :key="item"
            clickable
            :title="item"
            @click="toggle(item)"
          >
            <template #right-icon>
              <van-checkbox :name="item" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <fixed-bottom>
        <ButtonGroup @confirm="onConfirm" @cancel="onCancel" />
      </fixed-bottom>
    </van-popup>
  </div>
</template>

<script>
import { Field, Cell, Popup, CellGroup, Checkbox, CheckboxGroup } from 'vant'
import FixedBottom from '@/components/FixedBottom/index.vue'
import ButtonGroup from '@/components/ButtonGroup.vue'

export default {
  components: {
    [Field.name]: Field,
    [Cell.name]: Cell,
    [Popup.name]: Popup,
    [CheckboxGroup.name]: CheckboxGroup,
    [Checkbox.name]: Checkbox,
    [CellGroup.name]: CellGroup,
    FixedBottom,
    ButtonGroup
  },
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: 'multiSelector'
    },
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number],
      required: true
    },
    label: {
      type: String,
      required: true
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      canReset: true,
      pickerValue: [],
      show: false
    }
  },
  computed: {
    formatValue() {
      return this.value ? this.value : '请选择'
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val && this.pickerValue.length === 0) {
          this.pickerValue = val.split(',')
        }
      },
      immediate: true
    }
  },
  methods: {
    toggle(value) {
      if (this.pickerValue.includes(value)) {
        this.pickerValue = this.pickerValue.filter(item => item !== value)
        return
      }
      this.pickerValue.push(value)
    },
    onConfirm() {
      const value = this.pickerValue.join(',')
      this.$emit('input', value)
      this.canReset = false
      this.onCancel()
    },
    onCancel() {
      if (this.canReset) {
        this.pickerValue = this.value.split(',')
      }
      this.show = false
    },
    onOpen() {
      this.canReset = true
    }
  }
}
</script>

<style lang="less">
.picker-multi-field {
  position: relative;

 &::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 32px;
    bottom: 0;
    left: 32px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(235, 237, 240);
  }

  .van-cell {
    font-size: 32px;
    line-height: 48px;
    padding: 30px 40px;
    color: #646566;
  }

  .picker-cell {
    .van-cell__value {
      color: #323233;
    }
    .van-cell__right-icon {
      margin-left: 16px;
    }

    &.input-placeholder {
      .van-cell__value {
        color: #808080;
      }
    }
  }

  .popup-title {
    position: sticky;
    top: 0;
    font-size: 40px;
    padding: 0 40px;
    height: 110px;
    line-height: 110px;
    margin-bottom: 20px;
  }

  .van-popup {
    display: flex;
    flex-direction: column;
  }

  .van-checkbox-group {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
